<template>
  <div class="log">
    <div class="common">
      <div class="common-input">
        <el-input v-model="commonValue" placeholder="请输入内容"></el-input>
      </div>

      <div class="common-input">
        <el-date-picker
          v-model="commonDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
           format="yyyy-MM-dd" value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>

      <div class="common-button">搜索</div>
      <div class="common-button">重置</div>
    </div>

    <div class="table">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{
          color: '#333333',
          backgroundColor: '#f3f3f3',
        }"
      >
        <el-table-column prop="name" label="操作人员"> </el-table-column>
        <el-table-column prop="type" label="操作类型">
          <template slot-scope="scope">
            {{ scope.row.type == 0 ? "系统管理" : "设备管理" }}
          </template>
        </el-table-column>
        <el-table-column prop="text" label="操作内容"> </el-table-column>
        <el-table-column prop="ip" label="IP地址"> </el-table-column>
        <el-table-column prop="createtime" label="操作时间"> </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="1000" :current-page="page">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commonValue: "",
      commonDate: [],
      //-------------
      tableData: [
        {
          name: "admin",
          type: 0,
          text: "重置密码",
          ip: "223.11.141.96",
          createtime: "2025-4-10 10:08",
        },
        {
          name: "普通管理员",
          type: 0,
          text: "角色列表",
          ip: "223.11.141.96",
          createtime: "2025-4-10 10:08",
        },
        {
          name: "普通管理员",
          type: 0,
          text: "角色列表",
          ip: "223.11.141.96",
          createtime: "2025-4-10 10:08",
        },
        {
          name: "普通管理员",
          type: 0,
          text: "角色列表",
          ip: "223.11.141.96",
          createtime: "2025-4-10 10:08",
        },
      ],
    };
  },
  methods: {
    editHit() {},
  },
};
</script>

<style lang="less" scoped>
.log {
  .common {
      margin-bottom: 10px;
    display: flex;
    align-items: center;
    .common-input {
      margin-right: 10px;
      /deep/ .el-input {
        width: 250px;
      }
    }

    .common-input:last-child {
      margin-right: 0;
    }

    .common-button {
      padding: 9px 20px;
      box-sizing: border-box;
      border-radius: 5px;
      background: #2a82e4;
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
      cursor: pointer;
    }

    .common-button:last-child {
      background: #999999;
    }
  }

  .table {
    cursor: pointer;

    .operation {
      display: flex;
      align-items: center;
      color: #2a82e4;
    }

    .pagination {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 60px;
      box-sizing: border-box;

      /deep/ .el-pagination.is-background .el-pager li {
        border: 1px solid #f4f4f5;
      }

      /deep/ .el-pager li {
          border: 1px solid #f4f4f5;
      }

      /deep/ .el-pagination.is-background .btn-prev {
         border: 1px solid #f4f4f5;
      }
    }
  }
}
</style>